<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="{{ url_for('static',filename='css/order.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/hhorder.png') }}">


    <title>预订列表</title>

</head>

<body>

    <div id="app">
        <van-nav-bar fixed z-index="10000" v-bind:title="mTitle" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>

        <div class="default-height"></div>

        <form action="/">
          <van-search v-model="searchText" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>
        </form>

        <van-row v-if="nowlist">
            <van-col span="24" class="section">
                <p v-cloak class="tip-label">now</p>
            </van-col>
        </van-row>

        <van-list v-model="loading" :finished="finished" >
            <van-cell v-for="item in nowlist" :key="item" :title="item.user_name" :label="item.reason" >
                <template slot="title">
                  <span class="van-cell-text">{{item.user_name}}</span>
                  <van-tag plain type="success">{{item.depart_name}}</van-tag>
                    <h6 class="van-cell-text no-margin">{{item.time_desc}}</h6>
                    <h6 class="van-cell-text no-margin">{{item.reason}}</h6>
                </template>

            </van-cell>
        </van-list>

        <van-row v-if="futurelist">
            <van-col span="24" class="section">
                <p v-cloak class="tip-label">Future</p>
            </van-col>
        </van-row>

        <van-list v-model="loading" :finished="finished" >
            <van-cell v-for="item in futurelist" :key="item" :title="item.user_name" :label="item.reason" >
                <template slot="title">
                  <span class="van-cell-text">{{item.user_name}}</span>
                  <van-tag plain type="success">{{item.depart_name}}</van-tag>
                    <h6 class="van-cell-text no-margin">{{item.time_desc}}</h6>
                    <h6 class="van-cell-text no-margin">{{item.reason}}</h6>
                </template>

            </van-cell>
        </van-list>

        <van-row v-if="pastlist">
            <van-col span="24" class="section">
                <p v-cloak class="tip-label">past</p>
            </van-col>
        </van-row>

        <van-list v-model="loading" :finished="finished" >
            <van-cell v-for="item in pastlist" :key="item" :title="item.user_name" :label="item.reason" >
                <template slot="title">
                  <span class="van-cell-text">{{item.user_name}}</span>
                  <van-tag plain type="success">{{item.depart_name}}</van-tag>
                    <h6 class="van-cell-text no-margin">{{item.time_desc}}</h6>
                    <h6 class="van-cell-text no-margin">{{item.reason}}</h6>
                </template>

            </van-cell>
        </van-list>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">

<script>
    var dataList = {{ ordered|tojson }};
    var title = {{ title|tojson }};

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

    var app = new Vue({
      el: '#app',
       data() {
        return {
            nowlist: dataList['now'],
            futurelist: dataList['future'],
            pastlist: dataList['past'],
            loading: false,
            finished: true,
            mTitle: title,
            searchText: ""

        };
        },
      methods: {
          onClickLeft() {
              window.history.back();
          },
          onSearch() {
              window.location.href = $SCRIPT_ROOT + '/search?query=' + this.searchText;
          },
          onCancel() {
              console.log("onCancel");
          }
      }
    })

</script>

</html>